<template>
  <div class="app-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <!-- 批量删除 -->
        <el-button
          type="danger"
          @click="delList()"
          :disabled="dataListSelections.length == 0"
          v-permission="['scenes@delete']"
          >{{ $t("common.common12") }}</el-button
        >
        <!-- 新建 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="toAddEdit()"
          v-permission="['scenes@save']"
          >{{ $t("common.common18") }}</el-button
        >
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        @selection-change="selectionChangeHandle"
        :max-height="$store.state.app.tableHeight"
        v-permission="['scenes@index']"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          minWidth="50"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="id" width="100" fixed="left" label="ID" />
        <!-- 现场核实地 -->
        <el-table-column
          prop="name"
          min-width="150"
          :label="$t('siteManagement.siteManagement1')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["name_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 区域 -->
        <el-table-column
          prop="area"
          min-width="150"
          :label="$t('siteManagement.siteManagement2')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["area_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 详细地点 -->
        <el-table-column
          prop="content"
          min-width="150"
          :label="$t('siteManagement.siteManagement3')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["content_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 联系电话 -->
        <el-table-column
          prop="mobile_zh"
          min-width="180"
          :label="$t('siteManagement.siteManagement4')"
        >
        </el-table-column>
        <!-- 电邮 -->
        <el-table-column
          prop="email"
          min-width="150"
          :label="$t('siteManagement.siteManagement5')"
        />
        <!-- 营业时间 -->
        <el-table-column
          prop="business_remark"
          min-width="300"
          :label="$t('siteManagement.siteManagement6')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["business_remark_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          prop="status"
          min-width="100"
          :label="$t('common.common19')"
        >
          <template slot-scope="scope">
            <div
              class="switch"
              @click="
                switchClick(scope.row, checkPermission(['scenes@switchStatus']))
              "
              :class="
                checkPermission(['scenes@switchStatus']) ? '' : 'disabled'
              "
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="2"
                disabled
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common15')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['scenes@read', 'scenes@delete'])"
        >
          <template slot-scope="scope">
            <span
              @click="toAddEdit(scope.row.id)"
              v-permission="['scenes@read']"
            >
              <!-- 编辑 -->
              <btn-tip
                :content="$t('common.common20')"
                type="primary"
                icon="el-icon-edit"
              ></btn-tip>
            </span>
            <span
              @click="delList(scope.row.id)"
              v-permission="['scenes@delete']"
            >
              <!-- 删除 -->
              <btn-tip
                :content="$t('common.common9')"
                type="danger"
                icon="el-icon-delete"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['scenes@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
    <add-edit ref="add_edit" />
  </div>
</template>

<script>
import AddEdit from "./add_edit";
import {
  getCusList,
  ChangeSwitch,
  deleteItem,
} from "@/api/systems/siteManagement";

export default {
  components: {
    AddEdit,
  },
  data() {
    return {
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      dataListSelections: [], //多选
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getCusList({
        page: this.tableShow.currentPage,
        limit: this.tableShow.pageSize,
      })
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    switchClick(row, disabled) {
      // 暂无修改权限!
      if (!disabled) {
        this.$message({
          showClose: true,
          message: this.$t("common.common21"),
          type: "warning",
        });
        return false;
      }
      // var statusTitle = row.status == 1 ? "禁用" : "启用";
      var statusTitle =
        row.status == 1
          ? this.$t("common.common22")
          : this.$t("common.common23");
      // 是否
      this.$confirm(this.$t("common.common25") + statusTitle, statusTitle, {
        confirmButtonText: this.$t("common.common2"),
        cancelButtonText: this.$t("common.common1"),
        type: row.status == 1 ? "warning" : "success",
      })
        .then(() => {
          ChangeSwitch(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消
            message: this.$t("common.common24"),
          });
        });
    },
    delList(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        // "确定删除？",
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("common.common9") : this.$t("common.common12")
        }]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          deleteItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
    toAddEdit(rowID) {
      this.$refs.add_edit.init(rowID);
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>